<template>
	<view class="bg min100" style="padding-bottom:118rpx;">
		<view class="status_bar"></view>
		<view class="back">
			<image src="../../static/back.png" @click="handleBack"></image>
		</view>
		<view>
			<!-- <view class="image-wrap"> -->
			<image :src="info.images" class="collectImg" mode="aspectFill"></image>
			<!-- </view> -->
			<!-- 头部 -->
			<view class="topWrap white">
				<view class="plr-20 mt-30">
					<view class="">
						<view class="size-36 mb-22">
							{{info.name}}
						</view>
						<view class="flex size-22 flex-start">
							<view class="tipsLeft bg-gold color-1a mr-10 plr-10 ptb-7 radius-6">
								{{info.goods_category_name}}
							</view>
							<view class="flex flex-start mr-10">
								<view class="tipsLeft bg-gold color-1a plr-10 ptb-7"
									style="border-radius:6rpx 0 0 6rpx;">
									限量{{info.stock}}份
								</view>
								<view class="tipsRight gold ptb-7 plr-10" style="border-radius:0 6rpx 6rpx 0">
									第{{info.number_f}}份
								</view>
							</view>
							<view class="tipsRight ptb-7 gold plr-20 radius-6" v-if="info.label">
								{{info.label}}
							</view>
						</view>
					</view>

					<view class="size-50 gold bold mt-10">
						￥{{info.price}}
					</view>
					<view class="flex flex-start mt-10">
						<image :src="info.author_image" class="userImg mr-20" mode="aspectFill"></image>
						<view class="white size-24">
							{{info.author_name}}
						</view>
					</view>
				</view>
			</view>
			<!-- <view class=" plr-30 ptb-30 size-24 white mb-30 radius-16" style="background: #3B3D4B;">
				<view class=" size-44 bold">
					￥{{info.price}}
				</view>
				<view class="flex flex-start mt-20">
					<image :src="info.author_image" class="userImg mr-20" mode="aspectFill"></image>
					<view class="">
						<view class="size-28">
							创作者
						</view>
						<view class="mt-10 color-c">
							{{info.author_name}}
						</view>
					</view>
				</view>
			</view> -->
			<!-- 介绍 -->
			<view class="plr-20">
				<view class="radius-10 plr-20 pt-30 size-24 authCon pb-10 mt-20" style="background: #fff;">
					<view class="flex mb-30">
						<view class="white size-28">
							合约地址
						</view>
						<!-- @click="copyAddress(info.contract)" -->
						<view class="flex" style="width:70%">
							<view class="text-right text-ellipsis white size-28" style="width:100%">
								{{info.contract}}
							</view>
							<!-- <image class="copyImg ml-20" src="/static/copy.png" mode=""></image> -->
						</view>
					</view>
					<!-- <view class="flex mb-30">
						<view class="">
							认证标识
						</view>
						<view class="flex" style="width:70%" @click="copyAddress(info.meta_data)">
							<view class="rightText bold text-ellipsis" style="width:90%">
								{{info.meta_data}}
							</view>
							<image class="copyImg ml-20" src="../../static/copy.png" mode=""></image>
						</view>
					</view>
					<view class="flex mb-30">
						<view class="">
							认证标准
						</view>
						<view class="flex">
							<view class="red bold">
								{{info.attribute}}
							</view>
						</view>
					</view> -->
					<view class="flex mb-30">
						<view class="white size-28">认证网络</view>
						<view class="flex">
							<view class="white size-28">
								{{info.network_name}}
							</view>
						</view>
					</view>
					<view class="flex mb-30">
						<view class="white size-28">购买时间</view>
						<view class="flex">
							<view class="white size-28">
								{{info.create_time}}
							</view>
						</view>
					</view>
					<!-- <view class="flex mb-30">
						<view class="color-9 size-28">
							发行方
						</view>
						<view class="flex">
							<view class="white size-28">
								{{info.issuer}}
							</view>
						</view>
					</view> -->
				</view>
			</view>
			<view class="warn">
				<view class="warn-title">风险提示：</view>
				<view class="warn-text">
					数字藏品为虚拟商品，而非实物，仅限于经实名认证为年满18周岁的中国大陆用户购买。数字藏品的版权由发行方或原创者拥有，除另外取得版权拥有者书面同意外，用户不得将数字藏品用于任何商业用途。本商品一经出售，不支持退换。请勿对数字藏品进行炒作、场外交易，欺诈，或以任何其他非法方式进行使用。
				</view>
			</view>
			<!-- 介绍 -->
			<view class=" radius-16 mt-30 plr-20 ptb-30" v-if="info.content">
				<view class="mb-30 size-32 white">
					作品故事
				</view>
				<view class="white infoWrap" v-html="info.content">

				</view>
			</view>
		</view>
		<view class="btmWrap flex-end flex1 plr-30 flex-middle"
			v-if="info.status == 1 && (goods_status == 1 || is_trade == 1) || info.status == 2">
			<button hover-class="none" class="transBtn mr-20" v-if="info.status==1  && goods_status == 1"
				@click="transferShow=true">转赠</button>
			<button hover-class="none" class="saleBtn" @click="saleShowFn()"
				v-if="info.status==1 && is_trade == 1">出售</button>
			<button hover-class="none" class="saleBtn ml-20" @click="upCollect()" v-if="info.status==2">
				<text v-if='info.is_show==1'>下架</text>
				<text v-if='info.is_show==0'>上架</text>
			</button>
			<!-- <button type="primary" class="transBtn ml-20" hover-class="none" v-if="info.status==1||info.status==2"
				@click="changeShow=true;afterPrice=info.price">改价</button> -->
		</view>
		<!-- 预览图片 -->
		<u-popup v-model="preShow" mode='center' border-radius='20'>
			<view>
				<image :src="info.images" class="collectPreImg"></image>
			</view>
		</u-popup>
		<!-- 转赠 -->
		<u-popup v-model="transferShow" mode="center" border-radius="20" width="90%">
			<view class="plr-30 ptb-30">
				<view class="text-center bold size-32 bold">转赠</view>
				<u-field v-model="transferPhone" maxlength="11" label-width="0" placeholder="请输入受赠人手机号" />
				<u-field v-model="captcha" maxlength="6" label-width="0" placeholder="请填写验证码">
					<u-button size="mini" slot="right" hover-class="none" class='code' @click="getCode(1)">{{codeText}}
					</u-button>
				</u-field>
				<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
				<u-button @click="submitTransfer" hover-class="none" class="mt-30 btn">确认</u-button>
			</view>
		</u-popup>
		<!--出售 -->
		<u-popup v-model="saleShow" width="90%" mode="center" border-radius="20">
			<view class="plr-30 ptb-30">
				<view class="text-center bold size-32 bold">出售</view>
				<u-field type="number" label="￥" label-width="10" v-model="sale2.price" placeholder="请输入价格"
					@blur="totalPriceBlur" />
				<u-field type="text" label="" label-width="10" disabled
					:value="sale2.free ? `手续费(${freeRatioShow}%):￥${sale2.free}` : ''"
					:placeholder="`手续费(总价格${freeRatioShow}%)`" />
				<u-field type="text" label="" label-width="10" disabled
					:value="sale2.surplusPrice ? `实收￥：${sale2.surplusPrice}` : ''" placeholder="实收金额" />
				<u-field type="password" label="" label-width="10" v-model="sale2.password" placeholder="请输入支付密码" />
				<!--				<u-field v-model="captcha" maxlength="6" label-width="0" placeholder="请填写验证码">-->
				<!--					<u-button size="mini" slot="right" hover-class="none" class='code' @click="getCode(2)">{{codeText}}-->
				<!--					</u-button>-->
				<!--				</u-field>-->
				<!--				<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>-->
				<u-button style="width:590rpx" hover-class="none" class="mt-30 btn" @click="submitSale2">确认
				</u-button>
			</view>
		</u-popup>
		<!-- 改价 -->
		<u-popup v-model="changeShow" width="90%" mode="center" border-radius="20">
			<view class="plr-30 ptb-30">
				<view class="text-center bold size-32 bold">改价</view>
				<u-field v-model="afterPrice" label="￥" label-width="10" placeholder="请输入价格" type="number" />
				<u-button style="width:590rpx" hover-class="none" type="primary" class="mt-30" @click="submitChange">确认
				</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				preShow: false,
				id: "",
				info: {},
				is_trade: 0,
				changeShow: false,
				afterPrice: '',
				transferPhone: '',
				transferShow: false,
				salePrice: '',
				saleShow: false,
				goods_status: 0,
				captcha: '',
				codeText: '',
				userInfo: {}, //

				freeRatio: 0, // 手续费，默认0.1
				freeRatioShow: '0%', // 手续费，默认0.1
				sale2: {
					id: '',
					price: '', // 输入金额
					free: '', // 手续费
					surplusPrice: '', // 剩余金额
					password: '', // 密码
				},
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.init();
			this.getUserInfo()
			this.getFreeRatio();
			this.$http('api/login/helpContent').then(res => {
				this.is_trade = res.is_trade;
				this.goods_status = res.goods_status;
			})
		},
		methods: {
			saleShowFn() {
				this.saleShow = true;
				this.sale2.id = this.info.id;
				this.sale2.price = this.info.price;
				this.totalPriceBlur();
			},
			// 计算手续费，实收金额 2022-08-26 Aoingai
			totalPriceBlur() {
				let price = this.sale2.price;
				const freeRatio = parseFloat(this.freeRatio);
				if (price && !isNaN(price)) {
					price = this.sale2.price.match(/^\d+(?:\.\d{0,2})?/)[0];
					this.sale2.price = parseInt(price, 10);
					this.sale2.free = (parseFloat(price) * freeRatio)
						.toFixed(4)
						.match(/^\d+(?:\.\d{0,2})?/)[0];
					this.sale2.surplusPrice = (parseFloat(price) - parseFloat(this.sale2.free))
						.toFixed(4)
						.match(/^\d+(?:\.\d{0,2})?/)[0];
				} else {
					this.sale2.free = '';
					this.sale2.surplusPrice = '';
				}
			},
			//获取手续费  2022-08-26 Aoingai
			getFreeRatio() {
				this.$http('api/newapi/freeRatio').then(res => {
					this.freeRatio = res;
					this.freeRatioShow = (parseFloat(res) * 100).toFixed(2);
				})
			},
			getUserInfo() {
				this.$http('api/user/userInfo').then(res => {
					this.userInfo = res
				})
			},
			codeChange(text) {
				this.codeText = text;
			},
			getCode(type) {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$http('api/login/sendCode', {
						phone: this.userInfo.phone,
						type: type == 1 ? 2 : 8
					}, 'GET').then(res => {
						uni.hideLoading();
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}).catch(err => {
						console.log(err);
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			handleBack() {
				if (getCurrentPages().length === 1) {
					uni.switchTab({
						url: '/pages/home/index',
					})
				} else {
					uni.navigateBack()
				}
			},
			init() {
				this.$http('api/orders/usersGoodsDetail', {
					id: this.id
				}).then(res => {
					this.info = res;
				})
			},
			// 复制
			copyAddress(val) {
				// #ifdef APP-PLUS
				uni.setClipboardData({
					data: val,
					success: function() {
						uni.hideToast()
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '复制成功',
									icon: 'none'
								})
							}
						});
					}
				});
				// #endif
				// #ifdef H5
				let that = this;
				this.$copyText(val).then(function(e) {
					uni.showToast({
						title: "复制成功!",
						icon: "none"
					})
				}, function(e) {
					uni.showToast({
						title: "复制失败!",
						icon: "none"
					})
				})
				// #endif
			},

			// 转增
			submitTransfer() {
				if (this.transferPhone == "") {
					uni.showToast({
						title: "请输入受赠人手机号!",
						icon: "none"
					})
					return;
				}
				if (!this.captcha) return uni.showToast({
					title: "请输入验证码",
					icon: "none"
				})
				this.$http('api/orders/goodsTransfer', {
					id: this.id,
					phone: this.transferPhone,
					captcha: this.captcha
				}, 'POST').then(res => {
					uni.showToast({
						title: "转赠成功!",
						icon: "none"
					})
					this.transferShow = false;
					this.transferPhone = '';
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/index'
						})
					}, 500)
				})
			},
			// 出售
			submitSale() {
				if (this.salePrice == "") {
					uni.showToast({
						title: "请输入价格!",
						icon: "none"
					})
					return;
				}
				this.$http('api/orders/goodsSale', {
					id: this.id,
					price: this.salePrice,
					captcha: this.captcha
				}, 'POST').then(res => {
					uni.showToast({
						title: "出售成功!",
						icon: "none"
					})
					this.saleShow = false;
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/index'
						})
					}, 500)
				})
			},

			// 藏品挂售
			submitSale2() {
				if (!this.sale2.price) return uni.showToast({
					title: '请输入总价格！',
					icon: 'none'
				})
				if (!this.sale2.password) return uni.showToast({
					title: '请输入密码！',
					icon: 'none'
				})
				// this.saleShow = false;
				// return console.log(this.sale2);
				this.$http('api/orders/goodsSale', this.sale2, 'POST').then(res => {
					uni.showToast({
						title: "出售成功!",
						icon: "none"
					})
					this.saleShow = false;
					setTimeout(() => {
						uni.navigateBack();
					}, 500)
				})
			},
			//上架
			upCollect() {
				let _this = this;
				let msg = _this.info.is_show == 1 ? '下架?' : '上架?';
				uni.showModal({
					title: '提示',
					content: "将此藏品" + msg,
					success: function(res) {
						if (res.confirm) {
							_this.$http('api/orders/goodsUpdateShow', {
								id: _this.id,
								is_show: _this.info.is_show == 1 ? 0 : 1
							}, 'POST').then(res => {
								uni.showToast({
									title: "操作成功!",
									icon: "none"
								})
								_this.init();
							})
						} else if (res.cancel) {
							uni.showToast({
								title: "取消操作!",
								icon: "none"
							})
						}
					}
				});
			},
			// 改价
			submitChange() {
				if (this.afterPrice == "") {
					uni.showToast({
						title: "请输入价格!",
						icon: "none"
					})
					return;
				}
				this.$http('api/orders/goodsUpdatePrice', {
					id: this.id,
					price: this.afterPrice
				}, 'POST').then(res => {
					uni.showToast({
						title: "改价成功!",
						icon: "none"
					})
					this.changeShow = false;
					this.init();
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.warn {
		// width: 686rpx;
		margin: 40rpx 16rpx 0;
		background: #fff;
		border-radius: 10px;
		padding: 30rpx 20rpx;

		.warn-title {
			font-size: 28rpx;
			color: red;
		}

		.warn-text {
			margin-top: 28rpx;
			font-size: 24rpx;
			color: #A8ABB8;
			line-height: 38rpx;
		}
	}

	.white {
		color: #3c3c3c;
	}

	.gold {
		color: #9c8b66;
	}

	.btn {
		height: 88rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		background: linear-gradient(90deg, #EEA634, #DE2D32);
		border-radius: 44rpx;

		&::after {
			border: none;
		}
	}

	.code {
		width: 190rpx;
		height: 60rpx;
		color: #FFFFFF;
		background: #303143;
		border-radius: 30rpx;

		&::after {
			border: none;
		}
	}

	.back {
		position: relative;
		height: 0;

		image {
			position: absolute;
			width: 20rpx;
			height: 36rpx;
			top: 30rpx;
			left: 30rpx;
			z-index: 99;
		}
	}

	.collectImg {
		width: 100%;
		height: 450rpx;
	}

	.userImg {
		width: 40rpx;
		height: 40rpx;
		flex-shrink: 0;
		border-radius: 50%;
	}

	.buyBtn {
		font-size: 28rpx;
		color: #040404;
		line-height: 80rpx;
		height: 80rpx;
		background: #EFAA1C;
		border-radius: 40rpx;
		width: 210rpx;
	}


	.copyImg {
		width: 24rpx;
		height: 24rpx;
		filter: brightness(0.1);
	}

	.btmWrap {
		position: fixed;
		z-index: 10;
		width: 100%;
		bottom: 0;
		height: 118rpx;
		background: #fff;

		uni-button {
			color: #FFFFFF;
			font-size: 30rpx;
			margin: 0;
			padding: 0;
			line-height: 78rpx;
			border-radius: 39rpx;
			width: 100%;
			height: 78rpx;
		}

		.transBtn {
			background: linear-gradient(90deg, #A776F7 0%, #6990F7 100%);
		}

		.saleBtn {
			background: linear-gradient(90deg, #EEA634, #DE2D32);
			margin-left: 20rpx;
		}
	}

	.tipsLeft {
		// background: #EFAA1C;
		// color: #2f2f2e;
	}


	.tipsRight {
		background: #fff;
	}

	.infoWrap {

		/deep/ img {
			width: 100% !important;
			height: auto;
		}
	}

	.itemTips {
		font-size: 28rpx;
		background: #DEE4E8 !important;
		border-radius: 40rpx;
	}
</style>
